// generic transform
@mixin transform($transforms) {
     -moz-transform: $transforms;
       -o-transform: $transforms;
      -ms-transform: $transforms;
  -webkit-transform: $transforms;
          transform: $transforms;
}

@mixin backface-visibility ($arguments) {
  -webkit-backface-visibility: $arguments;
     -moz-backface-visibility: $arguments;
      -ms-backface-visibility: $arguments;
       -o-backface-visibility: $arguments;
          backface-visibility: $arguments;
}


@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);

@font-face {
    font-family: StarWars;
    src: url('Starjedi.ttf');
}

@font-face {
    font-family: StarWarsTitle;
    src: url('SWCrawlTitle2.ttf');
}

$timeFactor: 1;
$introColor: rgb(75, 213, 238);
$titlesColor: #ffd54e;

html,
body {
    width: 100%;
    height: 100%;
    font: 700 1em "News Cycle", sans-serif;
    letter-spacing:.15em;
    color: $titlesColor;
    margin: 0;
    background-color: black;
}

/* Remove dotted border on Firefox (http://stackoverflow.com/a/199319) */
button::-moz-focus-inner {
  border: 0;
}

.starwars {

  section {
    position: absolute;
    top: 45%;
    left: 50%;
    z-index: 1;
  }

  .start {
    font-size: 200%;
    $start-width: 100%;
    width: $start-width;
    margin: 0 0 0 (- $start-width / 2);
    text-align: center;
    top: 0;

    #config{
        margin: 0 auto;
        width: 500px;
    }
  }
  .introBg{
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: black;
      animation: introBg 9s * $timeFactor;
      opacity: 0;
  }

  .intro {
    margin: 0 auto;
    padding: 0 100px;
    position: static;
    top: 0px;
    left: 0px;
    font-size: 500%;
    font-weight: 400;
    color: $introColor;
    opacity: 0;
    animation: intro 6s * $timeFactor ease-out 1s * $timeFactor;
    @media (max-height: 720px){
        font-size: 350%;
    }
  }

  .logo {
    font-family: StarWars;
    text-align:center;
    position: static;

    margin: 0 auto;
    opacity: 0;
    animation: logo 11s * $timeFactor cubic-bezier(0.11, 0.51, 0.48, 0.88) 9s * $timeFactor;
    // animation-iteration-count: infinite; // for testing only
    // animation-delay: 0s;

    img {
      width: 300px;
    }
  }

  .titles {
    $titles-width: 14.65em;
    width: $titles-width;
    margin: 0 0 0 (- $titles-width / 2);
    top: auto;
    bottom: 0;
    height: 50em;
    font-size: 350%;
    text-align: justify;
    overflow: hidden;
    word-wrap: break-word;
    transform-origin: 50% 100%;
    @include transform(perspective(300px) rotateX(25deg));

    @media screen and (min-width: 1920px) and (max-width: 1920px) {
              // and (min-height: 1080px) and (max-height: 1080px) {
        zoom: 1.9;
        @include transform(perspective(266px) rotateX(29deg) scaleX(1.2));
    }

    @media screen and (min-width: 1366px) and (max-width: 1366px) {
        zoom: 1.5;
        @include transform(perspective(216px) rotateX(26deg));
    }

    @media screen and (min-width: 1280px) and (max-width: 1280px) {
        zoom: 1.5;
        @include transform(perspective(216px) rotateX(26deg));
    }

    > div {
        position: absolute;
        top: 100%;
        animation: titles 73s * $timeFactor linear 13s * $timeFactor;

      > p {
          margin: 1.35em 0 1.85em 0;
        line-height: 1.35em;

        @include backface-visibility(hidden);
      }

      .tcenter{
        margin: 1.35em 0 -1em 0;
        text-align: center;
      }
    }
  }
}

.verticalWrapper{
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

@keyframes intro {
  0% {
    opacity: 0;
  }
    20% {
    opacity: 1;
  }
    90% {
    opacity: 1;
  }
    100% {
    opacity: 0;
  }
}

@keyframes introBg {
    0% {
    opacity: 1;
  }
  100% {
      opacity: 1;
    }
}

@keyframes logo {
    0% {
    @include transform(scale(1.3));
    opacity: 1;
  }
    95% {
    opacity: 1;
  }
    100% {
    @include transform(scale(.01));
    opacity: 0;
  }
}

@keyframes titles {
  0% {
    top: 100%;
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    top: 20%;
    opacity: 0;
  }
}


.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.playButton{
  font-family: StarWars;
  cursor: pointer;
  font-size: 50px;
  border: 0;
  background: transparent;
  color: $titlesColor;
  text-shadow: none;
  transition: text-shadow 0.5s ease-out;
  outline: none;

  &:focus, &:hover {
    text-shadow: -1px 1px 8px #45f500, 1px -1px 8px #45f500;
  }
}

// Used only in the Form input. The text is a outlined SVG Text
/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
@function stroke($stroke, $color) {
  $shadow: ();
  $from: $stroke*-1;
  @for $i from $from through $stroke {
   @for $j from $from through $stroke {
      $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
    }
  }
  @return $shadow;
}
/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {Style}           - text-shadow
@mixin stroke($stroke, $color) {
  text-shadow: stroke($stroke, $color);
}

#form-starwars{
  // display: none;
  width: 500px;

  input,textarea {
    width: 97%;
    margin-bottom: 0px;
    padding: 0.3em;
    border: 3px solid transparentize($titlesColor, 0.8);
    border-radius: 3px;
    background: black;
    color: $titlesColor;
    transition: border-color 0.7s ease-out;
    overflow-x: hidden;

    &:active, &:focus {
      border-color: $titlesColor;
    }

  }

  textarea{
      resize: none;
      &#f-logo{
          color: black;
          border: 0.0666em solid transparentize($titlesColor, 0.8);
          border-radius: 0.0533em;
        font-family: StarWars;
        font-size: 50px;
        font-weight: normal;
        height: 92px;
        line-height: 86%;
        // width: 481.66px;
        width: 93%;
        @include stroke(2,$titlesColor);
      }

      &#f-text{
        margin-top: 10px;
      }
  }
}

#f-intro{
    color: $introColor !important;
}
#f-text{
  height: 200px;
}

#f-logo,#f-title,#f-episode{
    text-align: center;
}

#loader{
    .inner {
        width: 100%;
        text-align: center;
    }
}

#pageTitle{
    line-height: 100%;
  font-family: StarWars;
}

.star-wars-alert{
  background-color: black !important;

  border: 2px solid $titlesColor;
  h2, p{
    color: $titlesColor !important;
  }

  button{
    border: 2px solid $titlesColor !important;
    color: $titlesColor !important;
    background-color: black !important;
  }
}

#footer {
  position: fixed;
  width: 100%;
  bottom: 1em;
  text-align: center;
  font-size: 0.7em;
  color: #9e9e42;

  a {
    color: $titlesColor;
    text-decoration: none;
    &:hover {
      color: #fff;
      text-decoration: none;
    }
  }
}

.socialButtons{
    position: fixed;
    bottom: 1em;
    left: 1em;
    z-index: 10;

    form {
        margin-bottom: 5px;
    }

    div {
        margin-bottom: 0.33em;

        &:last-of-type{
            margin-bottom: 0;
        }
    }
}

.bg {
  width: 100%;
  height: 4100px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  background: url('bg-stars.png') repeat;
}

.running {
    overflow: hidden;
    .bg{
      animation: scrolldown 7s * $timeFactor 86s * $timeFactor forwards;
    }
}

@keyframes scrolldown {
  0% {
      transform: translateY(0);
  }
  100% {
      transform: translateY(-2200px);
  }
}

.deathstar {
  background: black url(deathstar.png) no-repeat;
  width: 655px;
  height: 663px;
  position: absolute;
  bottom: 1150px;
  right: 100px;
}

#logosvg{
  width: 900px;
  display: none;
  font-size: 210px;
}

.playAudio{
    width: 100%;
    text-align: center;
    font-size: 50px;
}

#videoButton{
    display: none;
    margin-bottom: 30px;
    font-size: 60px;
}

.sweet-alert {
    fieldset{
        input {
          width: 100%;
          margin-bottom: 10px;
          padding: 0.25em;
          border: 0.25em solid transparentize($titlesColor, 0.8);
          border-radius: 0.2em;
          background: black;
          color: $titlesColor;
          transition: border-color 0.7s ease-out;

          &:active, &:focus {
            outline: none;
            box-shadow: none;
            border: 0.25em solid $titlesColor;
          }
        }
    }
    .icon, .sa-input-error::before, .sa-input-error::after{
        background-color: #C31D00 !important;
    }
}

.sa-error-container{
    background-color: #3c3808 !important;
}

iframe{
    border: none;
}

.termsOfService{
    text-align: center;
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index: 10;

    a{
        color: $titlesColor;
        text-decoration: none;

        &:hover{
            text-decoration: underline;
        }
    }
}

@keyframes pulseDownload {
    0%{
        text-shadow: none;
    }

    40%{
        text-shadow: -1px 1px 93px #45f500, 1px -1px 23px #45f500;
    }

    60%{
        text-shadow: -1px 1px 93px #45f500, 1px -1px 23px #45f500;
    }

    100%{
        text-shadow: none;
    }
}

.downloadButton{
    @extend .playButton;
    animation: pulseDownload 3s ease 0s infinite;

    &:hover{
        text-shadow: -1px 1px 93px #45f500, 1px -1px 23px #45f500;
        animation: none;
    }
}

#createdIntros{
    #box{
        position: fixed;
        top: 1em;
        left: 1em;
        z-index: 10;
        border: $titlesColor 3px solid;
        border-radius: 7px;
        padding: 10px;
        color: $titlesColor;
        max-width: 20%;

        div{
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            a{
                color: $titlesColor;
                text-decoration: none;
                &.link{
                    width: 250px;
                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
            .circCont{
              display:inline-block;
              float: right;
              margin-top: 4px;
              margin-left: 5px;
              .circle {
                  width: 20px;
                  height: 20px;
                  background: transparent;
                  border: 2px solid $titlesColor;
                  -moz-border-radius: 50%;
                  -webkit-border-radius: 50%;
                  border-radius: 50%;
                  position: relative;
                  cursor: pointer;
                  display: inline-block;
                }
                .circle:after {
                  width: 12px;
                  height: 2px;
                  background-color: $titlesColor;
                  content: "";
                  left: 50%;
                  top: 50%;
                  margin-left: -6px;
                  margin-top: -1px;
                  position: absolute;
                  -moz-transform: rotate(-45deg);
                  -ms-transform: rotate(-45deg);
                  -webkit-transform: rotate(-45deg);
                  transform: rotate(-45deg);
                  /*@include transform-origin(100%,100%);*/
                }
                .circle:before {
                  left: 50%;
                  top: 50%;
                  margin-left: -6px;
                  margin-top: -1px;
                  width: 12px;
                  height: 2px;
                  background-color: $titlesColor;
                  content: "";
                  position: absolute;
                  -moz-transform: rotate(45deg);
                  -ms-transform: rotate(45deg);
                  -webkit-transform: rotate(45deg);
                  transform: rotate(45deg);
                  /*@include transform-origin(0%,0%);*/
                }
                .fromMiddle:before, .fromMiddle:after {
  z-index: 9999;
  -moz-transition-delay: 150ms;
  -o-transition-delay: 150ms;
  -webkit-transition-delay: 150ms;
  transition-delay: 150ms;
  -moz-transition: ease-in-out 400ms;
  -o-transition: ease-in-out 400ms;
  -webkit-transition: ease-in-out 400ms;
  transition: ease-in-out 400ms;
}
.fromMiddle span {
  width: 18px;
  height: 18px;
  background-color: $titlesColor;
  display: inline-block;
  position: absolute;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  left: -1px;
  top: -1px;
  z-index: -9999;
  -moz-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -webkit-transform: scale(0.3);
  transform: scale(0.3);
  opacity: 0;
  -moz-transition: ease-in-out 300ms;
  -o-transition: ease-in-out 300ms;
  -webkit-transition: ease-in-out 300ms;
  transition: ease-in-out 300ms;
}

.fromMiddle:hover:before, .fromMiddle:hover:after {
  position: absolute;
  background-color: black;
}
.fromMiddle:hover span {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
            }

        }
    }
}

#videoRequestAdvise{
    font-size: 50%;
}

#flabel{
  font-size: 13px;
  font-family: Arial;
  font-weight: normal;
  display: inline;
  vertical-align: middle;

}

.regular-checkbox {
	display: none;
}

.regular-checkbox + label {
	background-color: black;
	// border: 1px solid #cacece;
  border: 3px solid transparentize($titlesColor, 0.8);
	// box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
  top: 3px;
}

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
	// box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked + label {
	// border: 1px solid #adb8c0;
	// box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}

.regular-checkbox:checked + label:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	bottom: -2px;
	left: 3px;
	color: $titlesColor;
}

#text{
  line-height: 1.5em;
}

#episode{
  margin-bottom: -2em;
}

#title.SWFont{
  font-family: StarWarsTitle;
  font-weight: normal;
  font-size: 210%;
  transform: scaleY(1);
  margin-bottom: -0.1em;
  margin-top: 1.35em;
  text-transform: lowercase;
}

#title{
  transform: scaleY(2);
  margin-bottom: 1.6em;
  margin-top: 3.5em;
  text-transform: uppercase;
}

#playBut{
  z-index: 1000;
}

.sweet-alert {
  box-sizing : border-box;
  max-height : 100% !important;
  overflow-y : auto !important;
  padding : 0 17px 17px !important;
  width : 512px !important;
}
.sweet-alert:before {
  content : "";
  display : block;
  height : 17px;
  width : 0;
}

#btcether {
  &:hover {
      text-decoration: underline;
      cursor: pointer;
  }
  font-weight: bold;
  display: flex;
  line-height: 25px;
  span {
      margin-left: 5px;
  }
}